<template>
	<view class="main-page" style="background: white;">
		<view v-show="hasBedData" class="column-container width-100p" style="position: relative;">
			<view class="header-box">
				<image class="header-bg" src="../../static/home/bg_head_home.png"></image>
				<image class="title-ic" src="../../static/common/ic_title_white.png"></image>
				<view class="date-box">
					<view class="row-container">
						<image class="wh-40 mr-30" @click="gotoFormerDate"
						src="../../static/common/ic_arrow_left_white.png"></image>
						<uni-datetime-picker
							type="daterange"
							rangeSeparator="至"
							return-type="string"
							@change=changeDateRange
							:end="maxDate"
						>
							<text class="font-fff-36 font-weight-600">{{shortStartDate && shortEndDate
							 ? shortStartDate + "至" + shortEndDate :'近一周'}}</text>
						</uni-datetime-picker>
						
						<image class="wh-40 ml-30"  @click="gotoNextDate"
						src="../../static/common/ic_arrow_right_white.png"></image>
					</view>
					
					<view class="row-container width-170">
						<uni-datetime-picker
							type="daterange"
							rangeSeparator="至"
							return-type="string"
							@change=changeDateRange
							:end="maxDate"
						>
							<view class="date-choose-box">
								<image class="wh-30" src="../../static/home/ic_cal_red.png"></image>
								<text class="font-eb4-24 ml-4 font-weight-600">日期筛选</text>
							</view>
						</uni-datetime-picker>
					</view>
					
					
				</view>
			</view>
			
			<view style="margin-top: 284rpx;">
				<appointmentTable ref="appointmentTableRef"></appointmentTable>
			</view>
		</view>
		
		
		<view class="width-100p mt-272" v-show="!hasBedData">
			<toMakeAppointment></toMakeAppointment>
		</view>
	
		<!-- 客户预约信息弹窗 -->
		<view class="window-main" style="justify-content: flex-end;" v-if="showAppointInfoWindow">
			<view class="appoint-info-window">
				<image class="close-ic" src="../../static/common/ic_close_window.png"
				 @click="clickCloseInfoWindow"></image>
				<text class="font-333-36 font-weight-600">客户预约信息</text>
				
				<view class="row-container mt-40">
					<text class="font-333-30 font-weight-600" v-if="appointInfoData.status == 0">倒计时：</text>
					<text class="font-333-56 font-weight-600" v-if="appointInfoData.status == 0">{{appointCountdown}}</text>
					<text class="font-333-56 font-weight-600" v-if="appointInfoData.status == 1">{{appointInfoData.type == 1 ? '已完成' : '已到店'}}</text>
					
				</view>
				<view class="row-container-row-between width-100p mt-20">
					<text class="font-666-28">预约时间</text>
					<text class="font-333-28 font-weight-600">{{appointInfoData.startTimeStr}}-{{appointInfoData.endTimeStr}}</text>
				</view>
				<view class="row-container-row-between width-100p mt-14">
					<text class="font-666-28">设备/人员</text>
					<text class="font-333-28 font-weight-600">{{appointInfoData.deviceName}}</text>
				</view>
				<view class="divider-1 mt-20" style="width: 100%;"></view>
				
				
				<!-- 多人预约 -->
				<view class="column-container width-100p" v-if="appointInfoData.joinCount > 1">
					<view class="row-container-row-between width-100p mt-20">
						<text class="font-666-28">本次预约人数</text>
						<text class="font-333-28 font-weight-600">{{appointInfoData.joinCount}}人</text>
					</view>
					
					<view class="row-container-row-between width-100p mt-14">
						<text class="font-666-28">邀请客户数量</text>
						<text class="font-333-28 font-weight-600">{{appointInfoData.customList.length}}人</text>
					</view>
					
					<view class="row-container-row-between width-100p mt-14">
						<text class="font-666-28">已到店客户</text>
						<view class="row-container">
							<text class="font-f94-28 font-weight-600">{{appointInfoData.joinedCount}}</text>
							<text class="font-333-28 font-weight-600">/{{appointInfoData.customList.length}}</text>
						</view>
					</view>
					
					<view class="row-container-center width-100p pt-40 pb-20" @click="gotoCheckClient">
						<text class="font-f94-32 font-weight-600">管理本次预约客户</text>
						<image class="wh-20 ml-4" src="../../static/common/ic_arrow_right_red.png"></image>
					</view>
					
				</view>
				
				<!-- 单人预约 -->
				<view class="column-container width-100p" v-else>
					<view class="row-container-row-between width-100p mt-20">
						<text class="font-666-28">客户名称</text>
						<text class="font-333-28 font-weight-600">{{appointInfoData.realName}}</text>
					</view>
					<view class="row-container-row-between width-100p mt-14">
						<text class="font-666-28">联系电话</text>
						<view class="row-container" @click="handleCallCustomer">
							<text class="font-333-28 font-weight-600">{{appointInfoData.mobile}}</text>
							<view class="call-btn">
								<image class="wh-22 mr-4" src="../../static/common/ic_phone.png"></image>
								<text class="font-fff-22 font-weight-600">电话联系</text>
							</view>
						</view>
					</view>
					<view class="row-container-row-between width-100p mt-14">
						<text class="font-666-28">用户ID</text>
						<text class="font-333-28 font-weight-600">{{appointInfoData.customId}}</text>
					</view>
					<view class="row-container-row-between width-100p mt-14">
						<text class="font-666-28">上次到店时间</text>
						<text class="font-333-28 font-weight-600">{{appointInfoData.lastTime ? appointInfoData.lastTime : '暂无到店记录'}}</text>
					</view>
				</view>
				<view class="divider-1 mt-20" style="width: 100%;" v-if="appointInfoData.status == 0"></view>
				<view class="row-container-row-between width-100p mt-40" v-if="appointInfoData.status == 0">
					<text class="cancel-btn" @click="clickCancelAppoint">取消预约</text>
					<text class="cancel-btn" @click="clickChangeAppoint">改约</text>
					<view class="contact-btn" @click="handleClickConfirm" v-if="appointInfoData.type == 0">
						<text class="font-fff-32 font-weight-600">确认到店</text>
					</view>
					<view class="contact-btn" @click="handleClickFinish" v-if="appointInfoData.type == 1">
						<text class="font-fff-32 font-weight-600">确认完成</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 确认取消弹窗 -->
		<view class="window-main" v-if="showCancelAppointWindow">
			<view class="cancel-window">
				<text class="font-333-36 font-weight-600 ml-10">确认取消用户预约吗？</text>
				<text class="font-666-32 mt-10 ml-10">请与用户沟通后再取消预约，谨慎操作！</text>
				<view class="row-container width-100p mt-40 ml-10">
					<text class="font-f23-28 font-weight-600">*</text>
					<text class="font-333-28 font-weight-600">请选择取消预约原因</text>
				</view>
				<view class="row-container width-100p mt-20" style="flex-wrap: wrap;">
					<text v-for="(reasonItem , reasonIndex) in cancelReasonList" :key="reasonIndex"
					:class="{'chosen-reason-item' : chosenCancelReason == reasonItem , 
					'reason-item' : chosenCancelReason != reasonItem}" @click="changeCancelReason(reasonItem)">
						{{reasonItem}}
					</text>
				</view>
				
				<view class="row-container-row-between width-100p mt-40">
					<text class="cancel-cancel" @click="showCancelAppointWindow = false">取消</text>
					<text :class="{'cancel-confirm-negative' : !chosenCancelReason , 
					'cancel-confirm' : chosenCancelReason}" @click="handleCancelAppoint">确定</text>
				</view>
				
			</view>
		</view>
		
		<!-- 确认取消  多人-->
		<view class="window-main" v-if="showCancelMultiAppoint">
			<view class="cancel-window">
				<text class="font-333-36 font-weight-600 ml-10">取消预约？</text>
				<text class="font-666-32 mt-20 ml-10" style="text-align: center;">取消本次预约，将取消本次活动下的所有客户预约，请谨慎操作！</text>
				
				<view class="row-container-row-between width-100p mt-40">
					<text class="cancel-cancel" @click="showCancelMultiAppoint = false">取消</text>
					<text class="cancel-confirm" @click="handleCancelAppoint">确定</text>
				</view>
				
			</view>
		</view>
		
		<!--  确认到店弹窗 -->
		<view class="window-main" v-show="showConfirmWindow">
			<view class="cancel-window">
				<text class="font-333-36 font-weight-600">是否确认到店？</text>
				<view class="row-container mt-40 width-100p">
					<text class="cancel-cancel" @click="showConfirmWindow = false">取消</text>
					<text class="cancel-confirm" @click="handleConfirmComplete">确定</text>
				</view>
			</view>
		</view>
		
		<!--  确认完成弹窗（多人预约） -->
		<view class="window-main" v-show="showFinishWindow">
			<view class="cancel-window">
				<text class="font-333-36 font-weight-600">是否确认本次预约已完成？</text>
				<view class="row-container mt-40 width-100p">
					<text class="cancel-cancel" @click="showFinishWindow = false">取消</text>
					<text class="cancel-confirm" @click="handleConfirmFinish">确定</text>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	
	import toMakeAppointment from '../../components/toMakeAppointment.vue'
	import appointmentTable from '../../components/appointmentTable.vue'
	import constant from '../../utils/constant.js'
	
	export default {
		data() {
			return {
				hasBedData:true, // 是否有设备数据  没有则首页显示占位图
				startDate:'',
				endDate:'',
				
				shortStartDate:'',
				shortEndDate:'',
				
				maxDate:'',
				
				showAppointInfoWindow:false,
				showCancelAppointWindow:false,
				showCancelMultiAppoint:false ,
				
				cancelReasonList:[],
				chosenCancelReason:'',
				appointInfoData:{}  ,// 预约详情信息
				
				appointTimer:null , // 详情弹窗中的预约倒计时
				appointCountdown:'00:00:00' ,//详情弹窗中的预约倒计时 显示时间
				
				nowDate:null , // 当前的日期 date格式
				nextDate:null , // 7天后的日期  date格式
				
				showConfirmWindow:false , //确认到店弹窗
				showFinishWindow:false , //确认完成弹窗
			}
		},
		
		components:{
			toMakeAppointment,
			appointmentTable
		},
		
		onLoad() {
			this.loadUserDetail()
			this.loadCancelReasonList()
			this.getCurrentWeek()
			this.getMaxDate()
			
			let that = this
			//点击表格中的预约信息  加载预约详情信息
			uni.$on('clickUserItem' , (data)=>{
				console.log('clickUserItem---' , data)
				that.loadAppointInfo(data.id)
				
			})
			
			uni.$on('refreshIndexData' , ()=>{
				that.loadUserDetail()
				that.loadAppointmentData()
			})
			// this.loadAppointmentData()
		},
		
		onShow() {
			let that = this
			this.$nextTick(()=>{
				that.$refs.appointmentTableRef.caculateCurrentTimeLine()
				that.$refs.appointmentTableRef.startCurrentTimer()
			})
		},
		
		onHide() {
			let that = this
			this.$nextTick(()=>{
				that.$refs.appointmentTableRef.stopCurrentTimer()
			})
		},
		
		onPullDownRefresh() {
			this.loadUserDetail()
			this.loadAppointmentData()
		},
		
		methods: {
			getCurrentWeek(){
				this.nowDate = new Date()
				this.startDate = this.nowDate.toISOString().split('T')[0]
				this.shortStartDate = this.startDate.split('-')[1] + "-" + this.startDate.split('-')[2]
				
				let now = new Date()
				this.nextDate = new Date(now.setDate(now.getDate() + 6))
				this.endDate = this.nextDate.toISOString().split('T')[0]
				this.shortEndDate = this.endDate.split('-')[1] + "-" + this.endDate.split('-')[2]
				
				this.loadAppointmentData()
			},
			
			//跳转下一个7天
			gotoNextDate(){
				this.nowDate = new Date(this.nowDate.setDate(this.nowDate.getDate() + 7))
				
				this.startDate = this.nowDate.toISOString().split('T')[0]
				this.shortStartDate = this.startDate.split('-')[1] + "-" + this.startDate.split('-')[2]
				
				this.nextDate = new Date(this.nextDate.setDate(this.nextDate.getDate() + 7))
				this.endDate = this.nextDate.toISOString().split('T')[0]
				this.shortEndDate = this.endDate.split('-')[1] + "-" + this.endDate.split('-')[2]
				
				this.loadAppointmentData()
			},
			
			//跳转上一个7天
			gotoFormerDate(){
				this.nowDate = new Date(this.nowDate.setDate(this.nowDate.getDate() - 7))
				
				this.startDate = this.nowDate.toISOString().split('T')[0]
				this.shortStartDate = this.startDate.split('-')[1] + "-" + this.startDate.split('-')[2]
				
				this.nextDate = new Date(this.nextDate.setDate(this.nextDate.getDate() - 7))
				this.endDate = this.nextDate.toISOString().split('T')[0]
				this.shortEndDate = this.endDate.split('-')[1] + "-" + this.endDate.split('-')[2]
				
				this.loadAppointmentData()
			},
			
			loadCancelReasonList(){
				let that = this
				this.http({
					url:"/common/cancelList",
					method:"POST",
					hideLoading:true,
					data:{},
					success(data){
						if (data.code == 200){
							that.cancelReasonList = data.data
						}
					},
					failed(e){
						
					}
				})
			},
			
			loadUserDetail(){
				let that = this
				this.http({
					url:"/user/userDetail",
					method:"POST",
					hideLoading:true,
					data:{},
					success(data){
						if (data.code == 200){
							that.cookie.set("ap_user_data" , data.data)
							
							that.$nextTick(()=>{
								that.$refs.appointmentTableRef.handleInitTime(data.data.shopStartTime , data.data.shopEndTime)
							})
						}
						
					},
					failed(e){
						
					}
				})
			},
			
			loadAppointmentData(){
				let that = this
				if (!this.startDate || !this.endDate) return
				this.http({
					url:"/yy/custom/findIndexData",
					method:"POST",
					data:{
						startTime:this.startDate,
						endTime:this.endDate
					},
					success(data){
						if (data.code == 200){
							
							that.hasBedData = data.data && data.data.length > 0 
							&& data.data[0].bedList && data.data[0].bedList.length > 0
							
							
							that.$nextTick(()=>{
								that.$refs.appointmentTableRef.handleAppointmentData(data.data)
							})
						}
						uni.stopPullDownRefresh()
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
			},
			
			loadAppointInfo(id){
				if (!id) return
				let that = this
				this.http({
					url:"/yy/custom/detail",
					method:"POST",
					data:{
						id:id
					},
					success(data){
						if (data.code == 200){
							that.appointInfoData = data.data

							if (data.data.customList && data.data.customList.length > 0){
								let userData = data.data.customList[0]
								that.appointInfoData.customId = userData.customId
								that.appointInfoData.sex = userData.sex
								that.appointInfoData.mobile = userData.mobile
								that.appointInfoData.realName = userData.realName
								that.appointInfoData.lastTime = userData.lastTime
							}
							
							that.showAppointInfoWindow = true
							
							
							if (that.appointInfoData.countdown > 0){
								that.appointTimer = setInterval(()=>{
									that.appointCountdown = that.time.formatSeconds(that.appointInfoData.countdown)
									that.appointInfoData.countdown --
									
									if (that.appointInfoData.countdown < 1){
										clearInterval(that.appointTimer)
										that.appointCountdown = ""
									}
								},1000)
							}
							
						}
						
					},
					failed(e){
						
					}
				})
			},
			
			getMaxDate(){
				let now = new Date()
				//最大30天
				const thirtyDaysLater = new Date(now.setDate(now.getDate() + 30))
				this.maxDate = thirtyDaysLater.toISOString().split('T')[0]
				console.log("maxDate===" + this.maxDate)
			},
			
			changeDateRange(e){
				console.log('changeDateRange=-===' , e)
				this.startDate = e[0]
				this.endDate = e[1]
				
				this.shortStartDate = this.startDate.split('-')[1] + "-" + this.startDate.split('-')[2]
				this.shortEndDate = this.endDate.split('-')[1] + "-" + this.endDate.split('-')[2]
				
				
				this.loadAppointmentData()
			},
			
			//点击取消预约
			clickCancelAppoint(){
				if (!this.utils.checkAuthority(constant.auth_cancel_appoint)){
					return
				}
				
				this.clickCloseInfoWindow()
				if (this.appointInfoData.type == 1){
					this.showCancelMultiAppoint = true
				} else {
					this.showCancelAppointWindow = true
				}
			},
			
			//选择取消预约的原因
			changeCancelReason(item){
				this.chosenCancelReason = item
			},
			
			//点击改约
			clickChangeAppoint(){
				if (!this.utils.checkAuthority(constant.auth_change_appoint)){
					return
				}
				
				if (!this.appointInfoData) return
				
				this.clickCloseInfoWindow()
				uni.navigateTo({
					url:'/pages/appointment/modifyAppoint?appointId=' + this.appointInfoData.id
					+ "&customId=" + this.appointInfoData.customId
				})
				
			},
			
			clickCloseInfoWindow(){
				clearInterval(this.appointTimer)
				this.appointCountdown = "00:00:00"
				this.showAppointInfoWindow = false
			},
			
			//点击取消预约
			handleCancelAppoint(){
				if (!this.appointInfoData.id) return
				if (this.appointInfoData.type == 0 && !this.chosenCancelReason) return
				
				let that = this
				this.http({
					url:"/yy/custom/cancel",
					method:"POST",
					data:{
						id:this.appointInfoData.id,
						msg:this.chosenCancelReason
					},
					success(data){
						if (data.code == 200){
							that.showCancelAppointWindow = false
							that.showCancelMultiAppoint = false
							that.loadAppointmentData()
						}
						uni.showToast({
							title:data.msg,
							icon:'none'
						})
						
					},
					failed(e){
						
					}
				})
				
			},
			
			handleCallCustomer(){
				if (!this.appointInfoData.mobile) return
				uni.makePhoneCall({
					phoneNumber:this.appointInfoData.mobile
				})
			},
			
			//点击确认完成
			handleClickFinish(){
				if (!this.utils.checkAuthority(constant.auth_check_appoint)){
					return
				}
				
				this.clickCloseInfoWindow()
				this.showFinishWindow = true
			},
			
			//确认完成
			handleConfirmFinish(){
				if (!this.appointInfoData.id) return
				
				let that = this
				this.http({
					url:"/yy/custom/finish",
					method:"POST",
					data:{
						id:this.appointInfoData.id
					},
					success(data){
						if (data.code == 200){
							that.showFinishWindow = false
							that.loadAppointmentData()
						}
						setTimeout(()=>{
							uni.showToast({
								title:data.msg,
								icon:'none'
							})
						} , 500)
					},
					failed(e){
						
					}
				})
			},
			
			//点击确认到店
			handleClickConfirm(){
				if (!this.utils.checkAuthority(constant.auth_check_appoint)){
					return
				}
				
				this.clickCloseInfoWindow()
				this.showConfirmWindow = true
			},
						
			//确认到店
			handleConfirmComplete(){
				if (!this.appointInfoData.id) return
				
				let that = this
				this.http({
					url:"/yy/custom/submitYy",
					method:"POST",
					data:{
						id:this.appointInfoData.id
					},
					success(data){
						if (data.code == 200){
							that.showConfirmWindow = false
							that.loadAppointmentData()
						}
						uni.showToast({
							title:data.msg,
							icon:'none'
						})
					},
					failed(e){
						
					}
				})
			},
			
			//跳转查看多客预约的客户列表
			gotoCheckClient(){
				if (!this.appointInfoData) return
				uni.navigateTo({
					url:'/pages/index/checkClient?appointId=' + this.appointInfoData.id
					 + '&appointStatus=' + this.appointInfoData.status
				})
				this.clickCloseInfoWindow()
			}
			
			
		}
	}
</script>

<style lang="scss">
	.header-box{
		width: 100%;
		height: 284rpx;
		position: fixed;
		display: flex;
		flex-direction: column;
		z-index: 100;
	}
		
	.header-bg{
		width: 100%;
		height: 284rpx;
		position: absolute;
		top: 0;
	}
	
	.title-ic{
		width: 112rpx;
		height: 37rpx;
		margin-top: 115rpx;
		margin-left: 30rpx;
		z-index: 50;
		flex-shrink: 0;
	}
	
	.date-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 60rpx);
		margin: 50rpx 30rpx 0rpx 30rpx;
		z-index: 50;
		
		.date-choose-box{
			width: 170rpx;
			height: 50rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			background: white;
			border-radius: 25rpx;
		}
	}
	
	
	.appoint-info-window{
		display: flex;
		flex-direction: column;
		align-items: center;
		background: white;
		width: calc(100% - 60rpx);
		padding: 40rpx 30rpx;
		border-top-left-radius: 16rpx ;
		border-top-right-radius: 16rpx;
		position: relative;
		
		.close-ic{
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			right: 30rpx;
		}
		
		.call-btn{
			padding: 5rpx 10rpx;
			background: #F94C4B;
			border-radius: 6rpx;
			margin-left: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			
		}
		
		.cancel-btn{
			width: 180rpx;
			height: 88rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			margin-right: 20rpx;
			color: #333333;
			font-size: 32rpx;
			font-weight: 600;
			text-align: center;
			line-height: 88rpx;
		}
		
		.contact-btn{
			height: 88rpx;
			flex-grow: 1;
			background: #F94C4B;
			border-radius: 10rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
	}
	
	.cancel-window{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% - 198rpx);
		margin: 0rpx 69rpx;
		padding: 40rpx 30rpx;
		background: white;
		border-radius: 30rpx;
		
		.reason-item{
			border: #F94C4B solid 1rpx;
			padding: 18rpx 22rpx;
			font-size: 28rpx;
			color: #F94C4B;
			border-radius: 10rpx;
			margin: 0rpx 10rpx 20rpx 10rpx;
			font-weight: 600;
		}
		
		.chosen-reason-item{
			padding: 18rpx 22rpx;
			font-size: 28rpx;
			color: white;
			background: #EC5150;
			border-radius: 10rpx;
			margin: 0rpx 10rpx 20rpx 10rpx;
			font-weight: 600;
		}
		
		.cancel-cancel{
			width: 200rpx;
			height: 85rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			margin-right: 30rpx;
			text-align: center;
			line-height: 85rpx;
			color: #333333;
			font-size: 32rpx;
			font-weight: 600;
		}
		
		.cancel-confirm{
			flex-grow: 1;
			height: 85rpx;
			border-radius: 10rpx;
			background: #F94C4B;
			text-align: center;
			line-height: 85rpx;
			color: white;
			font-size: 32rpx;
			font-weight: 600;
		}
		
		.cancel-confirm-negative{
			flex-grow: 1;
			height: 85rpx;
			border-radius: 10rpx;
			background: #F94C4B;
			text-align: center;
			line-height: 85rpx;
			color: white;
			font-size: 32rpx;
			font-weight: 600;
			opacity: 0.5;
		}
	}
	
</style>
